<template>
	<view class="page">
		<view class="title">
			<image src="../../static/icon-back-black.png" style="width: 25rpx;height: 40rpx;" mode="" @tap="navback"></image>
			<view>手机号注册 </view>
		</view>
		<view class="form">
			<view class="item" v-for="(item,index) in node" :key="index" :data-c="index">
				<view class="content">
					<!-- 注释的为国际电话 请不要删除 -->
					<!-- <view v-if="item.label=='手机'" class="brod"><view @tap="pull">{{phonetittle}}</view></view> -->
					<input class="input" :placeholder="item.msg" :maxlength="item.len" :type="item.type" v-model.trim="form[item.key]"
					 @keyup.enter="fnRegister" />
					<view class="password" :class="{ show: item.type === 'text'  }" v-if="item.icon === 'password'" @tap="fnPsw(index)"></view>
				</view>
				<view class="code" :class="{ disabled: !codeClick }" v-if="item.key === 'sms_code'" @tap="getMsmCode">{{ codeText }}</view>
				<view class="international" v-if="index=='0' && show">
				  <view v-for="(item,index) in listitem" :key="index">
				    <view :class="{show:index==indexs}" @click="phone(item,index)">
				      <text>{{item.en}}</text>
				      <text>({{item.cn}})</text>
				      <text>{{item.code}}</text>
				    </view>
				  </view>
				</view>
			</view>
		</view>
		<view class="submit">
			<view class="submit-text" >
				<image class="submit-img" :src="protoindex?protoimg.show:protoimg.hide" @tap="protoindex=true">
				<text @click="navback('1')">用户协议</text>
			</view>
			<u-button type="primary" ripple shape="circle" :disabled="disabled" :loading="loading" @click="fnRegister">注 册</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getCode
	} from '@/utils/mixins';
	import indexList from './country.js';
	export default {
		data() {
			return {
				indexs: '36',
				inputValue: '',
				show: false,
				phonetittle: '(中国)+86',
				listitem:indexList.list,
				node: [
					// 表单节点
					{
						key: 'phone',
						label: '手机',
						msg: '请输入手机号',
						icon: 'phone',
						type: 'text',
						len: 20
					},
					{
						key: 'nickName',
						label: '昵称',
						msg: '请输入昵称',
						icon: 'nickName',
						type: 'text',
						len: 20
					},
					{
						key: 'account',
						label: '账号',
						msg: '设置账号',
						icon: 'phone',
						type: 'text',
						len: 12
					},
					{
						key: 'sms_code',
						label: '验证码',
						msg: '请输入验证码',
						icon: 'code',
						type: 'text',
						len: 6
					},
					{
						key: 'password',
						label: '密码',
						msg: '设置登录密码(6-20位)',
						icon: 'password',
						type: 'password',
						len: 21
					},
					{
						key: 'p_password',
						label: '再输密码',
						msg: '确认登录密码',
						icon: 'password',
						type: 'password',
						len: 21
					},
					{
						key: 'transaction',
						label: '安全密码',
						msg: '设置安全密码(6-20位)',
						icon: 'password',
						type: 'password',
						len: 21
					},
					{
						key: 'p_transaction_password',
						label: '再输安全',
						msg: '确认安全密码',
						icon: 'password',
						type: 'password',
						len: 21
					},
					{
						key: 'mark_code',
						label: '邀请码',
						msg: '邀请码(必填)',
						icon: 'invite',
						type: 'text',
						len: 12
					}
				],
				form: {}, // 表单内容
				showPsw: false, // 是否显示密码
				loading: false, // 注册加载中
				shows: true,
				protoindex:false,//用户协议
				protoimg:{
					show:'/static/home/protocol2.png',
					hide:'/static/home/protocol1.png'
				}
			}
		},
		mixins: [getCode],
		watch: {
			showPsw(val) {
				const type = val ? 'text' : 'password';
				this.show = false;
				this.$set(this.node[1], 'type', type)
			},
			// form(var){
			
			// }
		},
		computed: {
			// 注册按钮是否禁止点击
			disabled() {
				if(!this.protoindex) return true
				for (let i = 0; i < this.mustNode.length; i++) {
					const ele = this.mustNode[i]
					if (!this.form[ele.key]) return true
				}
				
				return false
			},
			// 必填的节点信息
			mustNode() {
				return this.node
			}
		},
		onLoad() {
		},
		methods: {
			phone(item,index){//选择长途电话
			  this.indexs=index;
			  this.show=false;
			  this.phonetittle = '('+item.cn +')'+ item.code;
			  this.codes=Number(item.code)
			  console.log(this.codes)
			},
			pull(){//国际电话显示
			  this.show = this.show == false?true:false
			},
			navback(index){
				if(index=='1'){
					uni.navigateTo({//用户协议
						url: './protocol'
					})
					this.protoindex=true
				}else{
				uni.navigateTo({//登录
					url:'./login'
				})	
				}
			},
			fnPsw(i) {
				const type = this.node[i].type
				this.$set(this.node[i], 'type', type === 'password' ? 'text' : 'password')
			},
			fnRegister() {
				if (this.disabled || this.loading) return
				var reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
				for (let i = 0; i < this.mustNode.length; i++) {
					const ele = this.mustNode[i]
					if (!this.form[ele.key]) return this.util.toast(ele.msg)
					if (ele.key === 'account' && reg.test(this.form.account))
					  return this.util.toast('账号不能输入汉字')
					    if (ele.key === 'phone' && !this.$u.test.mobile(this.form.phone))
					  return this.util.toast('请输入正确的手机号码')
				}
				if(this.form.account.length<'6' || this.form.account.length>'12'){
					 return this.util.toast('请输入6-12位字符的账号')
				}
				let {password,p_password,transaction,p_transaction_password}=this.form
				if(password!=p_password) return this.util.toast('登录密码不一致');
				if(transaction!=p_transaction_password) return this.util.toast('安全密码不一致');
				this.loading = true

				this.request.post('register', {
						...this.form,
						phone: this.form.phone,//手机号
						userName: this.form.account,//账号
						password: this.form.password,//登录密码
						// p_password: this.encrypt(this.form.p_password),//登录密码二次输入
						code: this.form.mark_code,//邀请码
						authCode: this.form.sms_code,//验证码
						securityPassword: this.form.transaction,//支付密码
						nickName:this.form.nickName
						// p_transaction_password: this.encrypt(this.form.p_transaction_password),//支付密码二次输入
					})
					.then(res => {
						if (res.data.code === 1) {
							this.util.toast('注册成功', 'success')
							uni.$emit('login', this.form.phone)
							setTimeout(() => {
								uni.navigateBack({
									delta:1,
								})
							}, 1000)
						}
						this.loading = false
					})
					.catch(err => {
						this.loading = false
					})
			},
			// 获取短信验证码
			getMsmCode(){
				if (!this.codeClick) return

				const phone = this.form.phone

				if (!phone && !this.form.email) return this.util.toast('请输入您的手机号码')
				if (!this.$u.test.mobile(phone)) return this.util.toast('请输入正确的手机号码')
				this.getCode(phone,1)
			}
		}
	}
</script>

<style lang="scss">
	.page{
		height: 1580rpx;
	}
	.title {
		// background: url(../../static/logoin.png);
		// background-size: 100%;
		// background-repeat: no-repeat;
		padding: 40rpx 60rpx 30rpx 38rpx;
		box-sizing: border-box;
		// height: 264rpx;
		margin-bottom:20rpx ;

		view:nth-child(1) {
			font-size: 38rpx;
			font-weight: bold;
		}

		view:nth-child(2) {
			font-size: 38rpx;
			font-weight: bold;
			padding-top: 80rpx;
		}
	}

	.item {
		
		.content {
			@include flex;
			width: 678rpx;
			height: 88rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 16rpx;
			line-height: 88rpx;
			margin: 0 auto 40rpx;
			// border-bottom: 1rpx solid $border;
		}

		.label {
			height: 40rpx;
			font-size: 28rpx;
			padding-left: 20rpx;
			background-size: 36rpx 40rpx;
			background-position: 0 center;
			background-repeat: no-repeat;
			line-height: 40rpx;
			$icon: phone email password code invite;

			@each $c in $icon {
				&.icon-#{$c} {
					// background-image: url("~@/static/login-icon-#{$c}.png");
				}
			}
		}

		.input {
			font-size: 25rpx;
			height: 88rpx;
			padding: 0 30rpx 0 20rpx;
			flex: 1;
			background: none;
			border: none;
			outline: none;
		}

		.password {
			width: 32rpx;
			height: 16rpx;
			background-image: url("~@/static/login-psw-hide.png");
			@include background;
			margin-right: 50rpx;
			@include click;

			&.show {
				height: 24rpx;
				background-image: url("~@/static/login-psw-show.png");
			}
		}
	}
	.item[data-c="3"]{
			display: flex;
		.content{
			width: 440rpx;
			margin: 0 18rpx 40rpx 36rpx;
		}
		.code {
			width: 220rpx;
			height: 88rpx;
			// background: #001429;
			border: 1px solid $light-color;
			border-radius: 16rpx;
			font-size: 28rpx;
			line-height: 88rpx;
			text-align: center;
			color: $light-color;
			@include click;
			&.disabled {
				color: #CACACA;
			}
		}
		
	}

	.submit {
		.submit-text{
			font-size: 24rpx;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			.submit-img{
				width: 25rpx;
				height: 25rpx;
				margin: 0rpx 15rpx ;
			}
		}
		margin: 20rpx 36rpx 50rpx;

		/deep/ .u-btn {
			background-color: $light-color;
			transition: .3s;
			height: 90rpx;
			border-radius: 20rpx;

			&[disabled] {
				box-shadow: none !important;
				background-color: #D7D7D7 !important;
			}
		}

		/deep/ .u-round-circle::after {
			border-radius: 20rpx;
		}
	}

	.agreement {
		margin-top: 50rpx;
		padding-bottom: 60rpx;
		text-align: center;
		font-size: 24rpx;
		color: #D7D7D7;

		text {
			color: #266DF5;
		}
	}


	.input-phone {
		border: 1px solid #808080;
		border-radius: 10rpx;
		display: flex;
	}
	.international{
	  width: 91%;
	  height: 600rpx;
	  overflow: scroll;
	  font-size: 24rpx;
	  line-height: 60rpx;
	  // margin-top: 20rpx;
	  border: 1rpx solid rgba(153, 153, 153, 0.2);
		padding-left: 30rpx;
	  border-radius: 10rpx;
		position: absolute;
		z-index: 9999;
		left: 35rpx;
		background: #FFFFFF;
		.show{
			color: #266df5;
		}
	}
	.brod{
		color: #F3C31B;
		padding-left: 10rpx;
	}
</style>
